import {
  AfterViewInit,
  Component, EventEmitter, Input,
  OnInit, Output,
} from '@angular/core';
import * as echarts from 'echarts';

// import * as echarts from 'echarts/core';
// import {
//   BarChart,
//   // 系列类型的定义后缀都为 SeriesOption
//   BarSeriesOption,
//   LineChart,
//   LineSeriesOption
// } from 'echarts/charts';
// import {
//   TitleComponent,
//   // 组件类型的定义后缀都为 ComponentOption
//   TitleComponentOption,
//   GridComponent,
//   GridComponentOption, TooltipComponent,
// } from 'echarts/components';
// import {
//   CanvasRenderer
// } from 'echarts/renderers';
//
// // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
// type ECOption = echarts.ComposeOption<
//   BarSeriesOption | LineSeriesOption | TitleComponentOption | GridComponentOption
//   >;

// 注册必须的组件
// echarts.use(
//   [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
// );

@Component({
  selector: 'apes-charts',
  template: `
    <div id="{{id}}" style="width: 100%;" [ngStyle]="style"></div>

    <!--    <div id="{{id}}"></div>-->
  `,
})

export class ApesChartsComponent implements OnInit, AfterViewInit {

  @Input() id: any = 'charts';
  @Input() height: any = '400px';
  @Input() option: any = {};

  @Input()
  set data(val) {
    if (val) {
      if(!this.myChart){
        this.initData();
      }
      this.getData(val);
    }
  }

  get data() {
    return this._data;
  }

  @Input()
  set loading(val) {
    if (!this.myChart) return;
    if (val) {
      this.myChart.showLoading();
    } else {
      this.myChart.hideLoading();
    }
  }

  get loading() {
    return this._loading;
  }

  @Output() clickChart = new EventEmitter<any>();

  style: any;
  myChart: any;
  _data: any;
  _loading: boolean;


  constructor() {
  }

  ngOnInit(): void {
    this.style = { height: this.height };
  }

  ngAfterViewInit() {
    setTimeout(() => {
      this.initData();
    }, 500);
  }


  initData() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById(this.id));
    // 绘制图表
    this.myChart.setOption(this.option);

    // tslint:disable-next-line:no-this-assignment
    let that = this;
    this.myChart.on('click', function(params) {
      that.clickChart.emit(params);
    });
  }


  getData(option) {
    // let option = {
    //   dataset: {
    //     dimensions: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
    //     // 提供一份数据。
    //     source: [
    //       ['衬衫', 5],
    //       ['羊毛衫', 20],
    //       ['雪纺衫', 36],
    //       ['裤子', 10],
    //       ['高跟鞋', 10],
    //       ['袜子', 20],
    //     ],
    //   },
    // }
    // if(this.myChart){
    this.myChart.setOption(option);
    // } else {
    //   this.initData();
    // }

  }
}
